<!-- 商品类别占比 -->
<template>
  <div class="proportionOfGoods">
    <div class="proportionOfGoods_content">

      <div class="proportionOfGoods_content_top">
        <el-radio-group v-model="radio" @change="changeType">
          <el-radio-button label="数量"></el-radio-button>
          <el-radio-button label="金额"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="proportionOfGoods_content_bottom">
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials1" ref="sortMaterials1" height="90%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData1" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials2" ref="sortMaterials2" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData2" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials3" ref="sortMaterials3" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData3" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials4" ref="sortMaterials4" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData4" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials5" ref="sortMaterials5" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData5" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials6" ref="sortMaterials6" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData6" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials7" ref="sortMaterials7" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData7" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
        <div class="chart">
          <div class="pieCharts">
            <pieChart id="sortMaterials8" ref="sortMaterials8" height="80%"></pieChart>
          </div>
          <tableBox class="tb" :data="tableData8" :show-serial-number="true" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getCompanyStockRateByCommodityTypeId, getCompanyStockTableByCommodityTypeId } from "@/api/bi/sale";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      time: null,
      radio: '数量',
      typeArr: [
        { text: '清洁工具', id: 21 },
        { text: '清洁药剂', id: 22 },
        { text: '垃圾处置', id: 23 },
        { text: '承载收纳', id: 25 },
        { text: '机械配件', id: 80 },
        { text: '客用品', id: 28 },
        { text: '劳保用品', id: 27 },
        { text: '其他', id: 37 },
      ],
      tableThead: ['', '名称', '库存'],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      load: null
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getMaterialsTypeRate(1)
    this.getTopTableData(1)
  },
  methods: {
    changeType(val) {
      this.load = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (val == '金额') {
        this.tableThead = ['', '名称', '金额']
        this.getMaterialsTypeRate(2)
        this.getTopTableData(2)
      } else {
        this.tableThead = ['', '名称', '库存']
        this.getMaterialsTypeRate(1)
        this.getTopTableData(1)
      }
    },

    // 获取物资类别占比图 
    async getMaterialsTypeRate(paramType) {
      let typeArr = this.typeArr

      const { data: res1 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[0].id, paramType });
      const { data: res2 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[1].id, paramType });
      const { data: res3 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[2].id, paramType });
      const { data: res4 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[3].id, paramType });
      const { data: res5 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[4].id, paramType });
      const { data: res6 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[5].id, paramType });
      const { data: res7 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[6].id, paramType });
      const { data: res8 } = await getCompanyStockRateByCommodityTypeId({ commodityTypeId: typeArr[7].id, paramType });
      let chartData1 = [], chartData2 = [], chartData3 = [], chartData4 = [], chartData5 = [], chartData6 = [], chartData7 = [], chartData8 = []

      chartData1 = [{ name: '可售', value: res1.availableRale }, { name: '已售', value: res1.saleRale }, { name: '锁定', value: res1.lockRale }]
      chartData2 = [{ name: '可售', value: res2.availableRale }, { name: '已售', value: res2.saleRale }, { name: '锁定', value: res2.lockRale }]
      chartData3 = [{ name: '可售', value: res3.availableRale }, { name: '已售', value: res3.saleRale }, { name: '锁定', value: res3.lockRale }]
      chartData4 = [{ name: '可售', value: res4.availableRale }, { name: '已售', value: res4.saleRale }, { name: '锁定', value: res4.lockRale }]
      chartData5 = [{ name: '可售', value: res5.availableRale }, { name: '已售', value: res5.saleRale }, { name: '锁定', value: res5.lockRale }]
      chartData6 = [{ name: '可售', value: res6.availableRale }, { name: '已售', value: res6.saleRale }, { name: '锁定', value: res6.lockRale }]
      chartData7 = [{ name: '可售', value: res7.availableRale }, { name: '已售', value: res7.saleRale }, { name: '锁定', value: res7.lockRale }]
      chartData8 = [{ name: '可售', value: res8.availableRale }, { name: '已售', value: res8.saleRale }, { name: '锁定', value: res8.lockRale }]

      let titleArr = []
      typeArr.forEach(item => {
        titleArr.push({
          text: item.text,
          left: 'center',
          top: '45%'
        })
      })
      let radius = ['40%', '70%']
      let label = { show: false }
      let itemStyle = {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      }
      this.$refs.sortMaterials1.initChart(chartData1, null, titleArr[0], radius, null, itemStyle)
      this.$refs.sortMaterials2.initChart(chartData2, null, titleArr[1], radius, label, itemStyle)
      this.$refs.sortMaterials3.initChart(chartData3, null, titleArr[2], radius, label, itemStyle)
      this.$refs.sortMaterials4.initChart(chartData4, null, titleArr[3], radius, label, itemStyle)
      this.$refs.sortMaterials5.initChart(chartData5, null, titleArr[4], radius, label, itemStyle)
      this.$refs.sortMaterials6.initChart(chartData6, null, titleArr[5], radius, label, itemStyle)
      this.$refs.sortMaterials7.initChart(chartData7, null, titleArr[6], radius, label, itemStyle)
      this.$refs.sortMaterials8.initChart(chartData8, null, titleArr[7], radius, label, itemStyle)

      // this.load.close()


    },
    //  获取物资 top 
    async getTopTableData(paramType) {
      let typeArr = this.typeArr

      const { data: res1 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[0].id, paramType });
      const { data: res2 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[1].id, paramType });
      const { data: res3 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[2].id, paramType });
      const { data: res4 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[3].id, paramType });
      const { data: res5 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[4].id, paramType });
      const { data: res6 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[5].id, paramType });
      const { data: res7 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[6].id, paramType });
      const { data: res8 } = await getCompanyStockTableByCommodityTypeId({ commodityTypeId: typeArr[7].id, paramType });

      this.tableData1 = this.formatTableData(res1)
      this.tableData2 = this.formatTableData(res2)
      this.tableData3 = this.formatTableData(res3)
      this.tableData4 = this.formatTableData(res4)
      this.tableData5 = this.formatTableData(res5)
      this.tableData6 = this.formatTableData(res6)
      this.tableData7 = this.formatTableData(res7)
      this.tableData8 = this.formatTableData(res8)
      this.load.close()

    },
    formatTableData(data) {
      let arr = []
      data.forEach(item => {
        arr.push([{ val: item.commodityTypeName }, { val: this.radio == '数量' ? item.commodityNumber : item.commodityMoney }])
      })
      if (arr.length == 0) {
        arr.push([{ val: '暂无数据', colspan: 2 }])
      }

      return arr
    },
    toMaterialStatistics() {
      this.$router.push("/cloudManage/supplies/materialStatistics");
    }
  }

}
</script>
<style lang="scss" scoped>
.proportionOfGoods {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  // overflow: hidden; 

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .proportionOfGoods_content {
    flex-grow: 1;
    height: 100%;
    // padding: 16px 22px;
    box-sizing: border-box;

    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 22px;
    // padding-top: 16px;
    // padding-left: 16px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .proportionOfGoods_content_top {
      flex-shrink: 0;
    }

    .proportionOfGoods_content_bottom {
      display: flex;
      justify-content: space-between;
      height: 100%;

      .chart {
        width: 12%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .pieCharts {
          width: 100%;
          height: 26%;
          flex-shrink: 0;
        }

        // >.tb {
        //   width: 90%;

        td {
          font-size: 14px !important;
        }

        // }
      }
    }

  }
}
</style>
